<template>
	<div class="role-management">
		<!-- 表格区域 -->
		<el-table :data="tableData" style="width: 100%" v-loading="loading" @row-click="handleRowClick"
			height="calc(100vh - 80px)">
			<el-table-column prop="id" label="角色ID" min-width="250" />
			<el-table-column prop="roleName" label="角色名称" width="180">
				<template #default="scope">
					<el-input v-if="scope.row.isEditing" v-model="scope.row.roleName" @blur="handleSave(scope.row)"
						@keyup.enter="handleSave(scope.row)" size="small" />
					<span v-else>{{ scope.row.roleName }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="createdAt" label="创建时间" width="160">
				<template #default="scope">
					{{ formatTime(scope.row.createdAt) }}
				</template>
			</el-table-column>
			<el-table-column prop="updatedAt" label="更新时间" width="160">
				<template #default="scope">
					{{ formatTime(scope.row.updatedAt) }}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="120%" fixed="right">
				<template #default="scope">
					<el-button size="small" @click.stop="handleEdit(scope.row)" :disabled="scope.row.isEditing">
						{{ scope.row.isEditing ? '编辑中' : '编辑' }}
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup>
	import {
		getRole,
		updateRole
	} from '@/api/role.js'
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	import {
		ElMessage
	} from 'element-plus'
	
	const router = useRouter()
	const tableData = ref([])
	const loading = ref(false)

	/**
	 * 点击详情
	 */
	const handleRowClick = (row) => {
		router.push(`/user/roleDetail/${row.id}`)
	}

	/**
	 * 点击编辑
	 */
	const handleEdit = (row) => {
		// 设置编辑状态
		tableData.value.forEach(item => {
			item.isEditing = false
		})
		row.isEditing = true
	}

	/**
	 * 保存修改
	 */
	const handleSave = async (row) => {
		try {
			loading.value = true
			// 调用API更新角色名称
			await updateRole({
				id: row.id,
				roleName: row.roleName
			})
			// 退出编辑状态
			row.isEditing = false
			// 更新更新时间
			row.updatedAt = new Date().toISOString()
			ElMessage.success('角色名称更新成功')
		} catch (error) {
			ElMessage.error('更新角色名称失败')
		} finally {
			loading.value = false
		}
	}

	/**
	 * 获取角色列表
	 */
	const fetchRoles = async () => {
		loading.value = true
		try {
			const res = await getRole()
			// 添加编辑状态字段
			tableData.value = res.data.map(item => ({
				...item,
				isEditing: false
			}))
		} catch (error) {
			ElMessage.error('获取角色列表失败')
		} finally {
			loading.value = false
		}
	}

	/**
	 * 时间格式化
	 */
	const formatTime = (time) => {
		return time ? time.replace('T', '\n').replace(/\.\d+Z$/, '') : '--'
	}

	/**
	 * 初始化加载数据
	 */
	onMounted(() => {
		fetchRoles()
	})
</script>

<style scoped>
	.role-management {
		padding: 20px;
		height: calc(100vh - 40px);
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.el-table {
		flex: 1;
		overflow-y: auto;

		:deep(.el-table__inner) {
			height: 100% !important;
		}
	}

	:deep(.el-table__body-wrapper) {
		overflow-y: auto;
		scrollbar-width: thin;
	}

	@media screen and (max-width: 768px) {
		.role-management {
			padding: 10px;
		}

		.el-table {
			font-size: 12px;
		}
	}
</style>